<template>
  <!--
    路由传参
      1：query
         传
           this.$router.push("/xxx?参数名=值")
           this.$router.push({
            path: "/xxx",
            query:{
                参数名:值
            }
           })
         取
           this.$route.query.参数名
     2：params
        传
          this.$router.push({
            name:'Xxx',
            params:{
                参数名:值
            }
          })
        收：
          this.$route.params.参数名
          vuex   pinia
     3:动态路由匹配
       配制路由
          {
            path:'/xxx/:参数名?'
          }
       传
         this.$router.push('/xxx/123')
       收：
         this.$route.parmas.参数名

 -->

  <div class="search">
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.push('/home')"
    ></van-nav-bar>
    <van-search
      v-model.trim="str"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @input="inputEvent"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <!-- 历史记录 -->
    <div v-if="str === ''">
      <van-cell title="历史记录"></van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in historyList"
        :key="index"
        :to="'/result/' + item"
      ></van-cell>
    </div>
    <!-- 联想词 -->
    <div v-else>
      <!-- <van-cell icon="search">
        <template #title>
          <div v-html="test"></div>
        </template>
      </van-cell> -->
      <van-cell icon="search" v-for="(item, index) in list" :key="index">
        <template #title>
          <div v-html="changeStr(item, str)"></div>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import { suggestion } from '@/api/search'
export default {
  data () {
    return {
      str: '',
      list: [],
      historyList: JSON.parse(localStorage.getItem('historyList')) || [],
      test: '<span style="color: red">1</span>0<span style="color: red">1</span>' // 101
    }
  },
  created () {
    // const xxx = 'a' //  ==>  <span style='color:red'>a</span>
    // const str = 'abaca'
    // const reg = new RegExp(xxx, 'g')
    // console.log(str.replace(reg, `<span style='color:red'>${xxx}</span>`))
  },
  methods: {
    onSearch () {
      // 存储相应搜索的值到本地，存储还需要持久化  1:值改变了存储到浏览器  2:初始值读取浏览器存储
      //  搜索有值，且在历史 记录中不存在
      if (this.str && !this.historyList.includes(this.str)) {
        this.historyList.unshift(this.str)
        this.historyList.splice(5)
        localStorage.setItem('historyList', JSON.stringify(this.historyList))
      }
      if (this.str) {
        this.$router.push('/result/' + this.str)
      }
    },
    async inputEvent () {
      if (!this.str) {
        return
      }
      const res = await suggestion(this.str)
      if (res.data.options[0] === null) {
        this.list = []
      } else {
        this.list = res.data.options || []
      }
      console.log('联想词', res)
    },
    // 文字高亮转换
    changeStr (result, q) {
      // result:等待替换的字符  ,q:需要替换的字符
      const reg = new RegExp(q, 'gi')
      return result.replace(reg, `<span style='color:red'>${q}</span>`)
      //   replaceAll 有兼容性
    }
  }
}
</script>
<style></style>
